<template>
  <div id="aCoursesList" class="bg-fa of">
    <div class="accountTip"><span style="font-size: large">账号信息</span></div>
    <div class="accountBox">
      <ul style="width: 360px;">
        <li>
          <span class="span1">账号ID</span
          ><span class="span2">&nbsp; {{ myInfo.id }}</span>
        </li>
        <li>
          <span class="span1">密码</span
          ><span class="span2">&nbsp; *******</span>
          <el-button type="text" @click="pwFormVisible = true"
            >修改密码</el-button
          >
        </li>
      </ul>
      <ul style="width: 360px;">
        <li>
          <span class="span1" style="margin-left: 10px;">昵称</span>
          <span class="span3 span4">&nbsp; {{ myInfo.nickname }}</span>
        </li>
        <li>
          <span class="span1" style="margin-left: 10px;">邮箱</span>
          <span class="span2">&nbsp; {{ myInfo.mail }}</span>
          <el-button type="text" @click="emailFormVisible = true"
            >更换</el-button
          >
        </li>
      </ul>
    </div>
    <el-dialog title="修改密码" :visible.sync="pwFormVisible">
      <el-form :model="pwForm">
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input v-model="pwForm.oldPw" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="pwForm.newPw" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pwFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="更换邮箱" :visible.sync="emailFormVisible">
      <el-form :ref="emailForm" :model="params">
        <el-form-item
          prop="mail"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-input type="text" placeholder="邮箱号" v-model="params.mail" />
        </el-form-item>

        <el-form-item
          prop="code"
          :rules="[
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]"
        >
          <el-input type="text" placeholder="验证码" v-model="params.code" />
          <a
            href="javascript:"
            type="button"
            @click="getCodeFun()"
            :value="codeTest"
            style="border: none;background-color: none"
            >{{ codeTest }}</a
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="emailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeEmail">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import ucenterApi from "@/api/ucenter";
import cookie from "js-cookie";

export default {
  data() {
    return {
      myInfo: {
        id: "",
        age: "",
        avatar: "",
        mobile: "",
        nickname: "",
        sex: ""
      },
      pwForm: {
        oldPw: "",
        newPw: ""
      },
      params: {
        mail: "",
        code: ""
      },
      pwFormVisible: false,
      emailFormVisible: false,
      formLabelWidth: "120px",
      sending: false, //是否发送验证码
      second: 60, //倒计时间
      codeTest: "获取验证码"
    };
  },

  created() {
    this.initPage();
  },

  methods: {
    initPage() {
      //debugger
      var jsonStr = cookie.get("fuyao_ucenter");
      if (jsonStr) {
        console.log("jsonStr" + JSON.stringify(jsonStr));
        this.myInfo = JSON.parse(jsonStr);
      }
    },
    getCodeFun() {
      //防止重复提交
      if (this.sending) return;
      this.sending = true;
      this.timeDown();
      this.$refs.emailForm.validateField("mail", errMsg => {
        if (errMsg == "") {
          registerApi.getMail(this.params.mail).then(res => {});
        }
      });
    },
    //倒计时
    timeDown() {
      console.log("进入倒计时");
      this.codeTest = this.second;
      //创建定时器
      const timmer = setInterval(() => {
        //计数器减一
        this.codeTest--;
        if (this.codeTest <= 0) {
          //停止定时器
          clearInterval(timmer);
          //还原计数器
          this.codeTest = "获取验证码";
          //还原按钮状态
          this.sending = false;
        }
      }, 1000);
    },
    changeEmail() {
      ucenterApi
        .changeEmail(this.myInfo.id, this.params.mail, this.params.code)
        .then(response => {
          if (response.data.code != 0) {
            this.$message.error(response.data.message);
          } else {
            this.emailFormVisible = false;
          }
        });
    },
    changePassword() {
      ucenterApi
        .changePassword(this.myInfo.id, this.pwForm.oldPw, this.pwForm.newPw)
        .then(response => {
          if (response.data.code != 0) {
            this.$message.error(response.data.message);
          } else {
            this.pwFormVisible = false;
          }
        });
    }
  }
};
</script>
<style>
.accountBox {
  width: 822px;
  height: 185px;
  background: #fcfcfc;
  border-radius: 4px;
  padding-top: 20px;
  padding-left: 20px;
}
.accountTip {
  height: 80px;
  line-height: 80px;
  padding-left: 20px;
}
ul {
  float: left;
}
</style>
